<template>
  <el-container>
    <el-main>
      <div class="AdminContent">
        <div class="addbtn">
          <el-button type="primary" @click="goAdd">添加</el-button>
        </div>
        <div class="userTable">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="id" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="loginEmail" label="登录邮箱"></el-table-column>
            <el-table-column prop="loginDaily" label="登录日志" sortable>
              <template slot-scope="scope">
                {{ scope.row.loginDaily }}
              </template>
            </el-table-column>
            <el-table-column prop="stoplogin" label="禁止登录"></el-table-column>
            <el-table-column fixed="right" label="操作" width="148">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.id)" type="primary" size="mini" class="editTable">编辑
                </el-button>
                <el-button type="danger" size="mini" @click="deleteUser(scope.row.id)" class="deleteTable">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="this.alldata.current_page" :page-sizes="[10, 20, 50, 100]"
            :page-size="Number(this.alldata.per_page)" layout="total, sizes, prev, pager, next, jumper"
            :total="alldata.total">
          </el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getAdministrator, delAdministrator } from '@/network/system'
import { Message, MessageBox } from 'element-ui';

export default {
  data() {
    return {
      tableData: [],
      params: {
        page: 1,
        size: 10,
        sort: 'id',
        order: 'desc'
      },
      alldata: {}
    }
  },
  methods: {
    deleteUser(id) {
      MessageBox.confirm('确认操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let { status, message } = await delAdministrator(id)
        if (status === 0) {
          Message({
            type: 'success',
            message: '删除成功!'
          })
          this.tableData = []
          this.initData()
        } else {
          Message.error(message)
        }
      }).catch(() => { })
    },
    goAdd() {
      this.$router.push({ path: '/system/administrator/create' })
    },
    async initData() {
      const { data } = await getAdministrator(this.params);
      this.alldata = data;
      for (let i = 0; i < this.alldata.data.length; i++) {
        let obj = {
          id: this.alldata.data[i].id,
          name: this.alldata.data[i].name,
          loginEmail: this.alldata.data[i].email,
          loginDaily: this.alldata.data[i].last_login_date ? `${this.formatDate(this.alldata.data[i].last_login_date)} / ${this.alldata.data[i].last_login_ip}` : '/',
          stoplogin: '',
        }
        if (this.alldata.data[i].is_ban_login === 0) {
          obj.stoplogin = "否";
        } else {
          obj.stoplogin = "是";
        }
        this.tableData.push(obj);
      }
    },
    formatDate(data) {
      var dates = new Date(data);
      var year = dates.getFullYear();
      var month = dates.getMonth() + 1;
      var date = dates.getDate();
      var hour = dates.getHours();
      var minute = dates.getMinutes();
      return year + "-" + month + "-" + date + " " + hour + ":" + minute
    },
    handleClick(id) {
      this.$router.push({
        path: '/system/administrator/update',
        query: { id }
      })
    },
    handleSizeChange(size) {
      this.params.size = size
      this.tableData = []
      this.initData()
    },
    handleCurrentChange(page) {
      this.params.page = page
      this.tableData = []
      this.initData()
    }
  },
  created() {
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  text-align: center;
  background-color: #f1f2f9;

  .AdminContent {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 8px;
    padding: 28px;

    .addbtn {
      text-align: left;
      height: 40px;
      line-height: 40px;
      margin-bottom: 20px;
    }

    .block {
      margin-top: 30px;
    }
  }

  .editTable {
    display: inline-block;

    &:hover {
      border-bottom: 1px solid #409eff;
    }
  }

  .deleteTable {
    color: #fff;

    &:hover {
      border-bottom: 1px solid #f56c6c;
    }
  }
}
</style>